<template>
  <div :class="prefixCls">
    <a-row :class="`${prefixCls}-top`">
      <a-col :span="7" :class="`${prefixCls}-col`">
        <a-row>
          <a-col :span="16">
            <div :class="`${prefixCls}-top__avatar`">
              <img width="70" :src="userInfo.Avatar" />
              <span>{{ userInfo.NickName }}</span>
              <div>{{ userInfo.Sign }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div :class="`${prefixCls}-top__detail`">
              <p>
                <Icon icon="noto-v1:birthday-cake" />
                {{ userInfo.Age }}
              </p>
              <p v-if="getUserZodiacSign()">
                <Icon :icon="getUserZodiacSign()?.Icon" />
                {{ getUserZodiacSign()?.Display }}
              </p>
              <p v-if="getUserStarSign()">
                <Icon :icon="getUserStarSign()?.Icon" :color="getUserStarSign()?.Color" />
                {{ getUserStarSign()?.Display }}
              </p>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8" :class="`${prefixCls}-col`">
        <CollapseContainer :title="t('routes.dashboard.account.center.userTag')" :canExpand="false">
          <TagEditor
            :value="userInfo.Tag"
            :omitLength="20"
            :editEnabled="false"
            :randomColor="true"
          />
        </CollapseContainer>
      </a-col>
      <a-col :span="9" :class="`${prefixCls}-col`">
        <CollapseContainer
          :class="`${prefixCls}-top__team`"
          :title="t('routes.dashboard.account.center.userTitle')"
          :canExpand="false"
        >
          <div
            v-for="(userTitle, index) in userInfo.Title"
            :key="index"
            :class="`${prefixCls}-top__team-item`"
          >
            <Icon icon="fa-solid:user-tag" color="#3b5999" />
            <span>{{ userTitle }}</span>
          </div>
        </CollapseContainer>
      </a-col>
    </a-row>
    <div :class="`${prefixCls}-bottom`">
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" :tab="t('routes.dashboard.message.title')"><Message /></TabPane>
        <TabPane key="2" tab="应用" v-if="false"><Application /></TabPane>
        <TabPane key="3" tab="项目" v-if="false"><Project /></TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, Row, Col } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/Container/index';
  import Icon from '@/components/Icon/Icon.vue';
  import { TagEditor } from '@/components/Tag';

  import { ChineseZodiacSignEntity } from '@/enums/chineseZodiacSignEnum';
  import { StarSignEnumEntity } from '@/enums/starSignEnum';

  import Message from './Message.vue';
  import Application from './Application.vue';
  import Project from './Project.vue';

  import { useI18n } from '@/hooks/web/useI18n';

  // import { achieveList } from './index.data';
  import { useIdentityStore } from '@/store/modules/identity';

  const ARow = Row;
  const ACol = Col;
  const TabPane = Tabs.TabPane;

  const { t } = useI18n();
  const activeKey = ref('1');

  const identityStore = useIdentityStore();
  const userInfo = ref(identityStore.getUserInfo);

  /** 获取用户生肖 */
  function getUserZodiacSign(): ChineseZodiacSignEntity | null {
    if (userInfo.value.ZodiacSign === undefined || userInfo.value.ZodiacSign === null) {
      return null;
    }
    const zodiacSignEntity: ChineseZodiacSignEntity = new ChineseZodiacSignEntity(
      userInfo.value.ZodiacSign,
    );
    return zodiacSignEntity;
  }
  /** 获取用户星座 */
  function getUserStarSign(): StarSignEnumEntity | null {
    if (userInfo.value.StarSign === undefined || userInfo.value.StarSign === null) {
      return null;
    }
    const starSignEntity: StarSignEnumEntity = new StarSignEnumEntity(userInfo.value.StarSign);
    return starSignEntity;
  }

  const prefixCls = 'account-center';
</script>

<style lang="less" scoped>
  .account-center {
    &-col {
      padding: 0 10px;

      &:not(:last-child) {
        border-right: 1px dashed rgb(206 206 206 / 50%);
      }
    }

    &-top {
      margin: 16px 16px 12px;
      padding: 10px;
      border-radius: 3px;
      background-color: @component-background;

      &__avatar {
        text-align: center;

        img {
          margin: auto;
          border-radius: 50%;
        }

        span {
          display: block;
          font-size: 20px;
          font-weight: 500;
        }

        div {
          margin-top: 3px;
          font-size: 12px;
        }
      }

      &__detail {
        margin-top: 15px;
        padding-left: 20px;
      }

      &__team {
        &-item {
          display: inline-block;
          padding: 4px 24px;
        }

        span {
          margin-left: 3px;
        }
      }
    }

    &-bottom {
      margin: 0 16px 16px;
      padding: 10px;
      border-radius: 3px;
      background-color: @component-background;
    }
  }
</style>
